<!--  -->
<template>
  <div class="">
    <div>
      <input type="text" v-model.number="price" />
      <button @click="changePrice">修改价格</button>
      <button @click="deletePrice">删除价格</button>
    </div>
    <ul>
      <li v-for="item of arrData" :key="item.id">
        <span>{{ item.id }}</span>
        <span>{{ item.name }}</span>
        <span>{{ item.price }}</span>
      </li>
    </ul>
    <hr />
    <h3>
        如果数据没有添加set，我们改变数据的时候，data中的数据会发生改变，但是不会触发视图刷新，
        这时，如果有set的数据发生改变，会发现刚才没有刷新的数据视图也跟随刷新了
    </h3>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      arrData: [],
      price: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changePrice() {
      // 有个对象有数据劫持的price就会触发刷新、所有price都是新加的，不会触发刷新
      this.arrData.forEach((i) => {
        // i.price = this.price;
        this.$set(i, "price", this.price);
      });
    },
    deletePrice() {
      this.arrData.forEach((i) => {
        // delete i.price;
        this.$delete(i, "price");
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.arrData = [
      { id: 0, name: "css" },
      { id: 1, name: "js" },
    ];
    this.arrData.push({ id: 3, name: "html" });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>